import {connect} from 'react-redux';
import {AtIcon, AtFloatLayout} from 'taro-ui';
import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton'
import {Image, Block, View, Text, Navigator} from '@tarojs/components';
import {DateType} from '../../reducers/select-date';
import {platform} from '../../utils/platform-settting.service';
import {
  SiteInfo,
  PlatformSet, ScenicInfo, SecnicDetail
} from '../../utils/server.interface';
import {http} from '../../utils/http';
import {
  TOURIST_DETAIL,
  TOURIST_DETAIL_SITE,
  LIMIT_FROM_SELLER_SINCE, USER_SALE_SUB, OFF_USER_SALE_SUB,
  GET_GOODS_USER_LIST_DATA, RESOURCE_URL, TOURIST_INFO, UPDATE_USER_SHARE_DATE
} from '../../constants/api';
import {getSharePoster, getPoster} from '../../utils/poster.service'
import {user} from '../../utils/user.service';
import ProductName from '../components/product-name/product-name';
import EnterStore from '../components/enter-store/enter-store';
import OtherBar from '../components/detail-bar/other-bar';
import DetailHeader from '../components/detail-header/detail-header';
import {location} from '../../utils/location.service';
import MakePoster from '../components/make-poster/make-poster';
import SupportBar from '../../components/support-bar/support-bar'
import LiveBar from "../components/live-bar/live-bar";
import JoinWx from "../components/join-wx/join-wx";
import {newHttp} from "../../utils/request";
import {GetRequest, vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import CouponBox from "../components/coupon-box";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {lxH5Wx} from "../../utils/lx.h5.service";
import {getContent} from "../../utils/handlerPublicCode";
import '../scenic/detail.scss';
import './accompany.scss';

type PageStateProps = {
  selectDate: DateType
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  url: string
  itemId: string
  itemName: string
  sharePoster: false | { url: string }
  shopId: string
  api: string
  firstGet: boolean
  good: SecnicDetail
  info: ScenicInfo
  siteInfo: SiteInfo | false
  tabIndex: number
  sitePhone: string
  siteServiceWx: string
  floatLayout: boolean
  notice: string
  destination: string[]
  departure: string[]
  bindSellerId: number
  isHideNavigation: number
  height: number
  showLoading: boolean
  platformSet?: PlatformSet
  goodsId: number
  userList: []
  userCount: number
  buyDate: string
  isLogin: boolean
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Accompany {
  props: IProps
}

@connect(({selectDate}) => ({
  selectDate,
}), () => ({}))

class Accompany extends Component {
  state: PageState = {
    url: '',
    itemId: '',
    itemName: '',
    sharePoster: false,
    shopId: '',
    api: '',
    firstGet: true,
    height: 550,
    good: {
      id: 0,
      images: [],
      location: '',
      mp3: '',
      uuid: '',
      slogan: '',
      address: '',
      name: '',
      serviceLabels: [],
      salesVolume: 0,
      is_show_customer_service: 1,
      price: 99999,
      market_price: 999999,
      detail_type: 0,
    },
    info: {
      goodsList: [],
      isSeller: 0,
      is_sale: 1,
    },
    siteInfo: false,
    tabIndex: 0,
    sitePhone: '',
    siteServiceWx: '',
    floatLayout: false,
    notice: '',
    destination: [],
    departure: [],
    isHideNavigation: 0,
    bindSellerId: 0,
    showLoading: true,
    userList: [],
    userCount: 0,
    goodsId: 0,
    buyDate: '',
    isLogin: false,
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    let platformSet = platform.info
    if (!platform.isLoaded) {
      platformSet = (await platform.getSetting()) || platform.info
    }
    if (platformSet.platformName) {
      Taro.setNavigationBarTitle({
        title: platformSet.platformName
      })
    }
    this.setState({isHideNavigation: platformSet.isHideNavigation, platformSet})
    let id = '';
    let isId = false
    const scene = Taro.getCurrentInstance().router.params.scene as string | undefined;
    let bindSellerId = Taro.getStorageSync('bindSellerId') || 0;
    if (scene && /^\d+_\d+_\d+$/.test(scene)) {
      platform.scene = 0;
      const paramArr = scene.split('_'); // [ itemId, sellerId, bindSellerId, sid ] 长度不固定
      if (!paramArr[0] || !paramArr[1] || !paramArr[2]) {
        Taro.showToast({
          title: '无效的参数',
          icon: 'none'
        });
        Taro.switchTab({url: '/pages/index/index'})
        return false;
      }
      id = paramArr[0];
      if (platformSet.isSellerPermanentLock) {
        if (!bindSellerId) {
          bindSellerId = paramArr[2];
        }
      } else {
        bindSellerId = paramArr[2];
      }
      isId = true;
    } else {
      if (platformSet.isSellerPermanentLock) {
        if (!bindSellerId) {
          bindSellerId = Taro.getCurrentInstance().router.params.bindSellerId || bindSellerId;
        }
      } else {
        bindSellerId = Taro.getCurrentInstance().router.params.bindSellerId || bindSellerId;
      }
      if (!Taro.getCurrentInstance().router.params || !Taro.getCurrentInstance().router.params.itemId) {
        Taro.showToast({
          title: '无效的参数',
          icon: 'none'
        });
        Taro.navigateBack();
        return false;
      }
      const {itemId, good_Id, buyDate} = Taro.getCurrentInstance().router.params;
      this.setState({goodsId: good_Id, buyDate})
      id = itemId
    }
    user.bindSellerId = bindSellerId
    Taro.setStorage({
      key: 'bindSellerId',
      data: user.bindSellerId,
      success: res => {
        if (bindSellerId) {
          Taro.login({
            success(res) {
              if (res.code) {
                const integralForm = {
                  sellerId: bindSellerId,
                  code: res.code
                }
                http.post(LIMIT_FROM_SELLER_SINCE, integralForm);
              } else {
                //console.log('登录失败！' + res.errMsg)
              }
            }
          })
        }
      }
    })

    const detail = await this.getDetailData(id, bindSellerId, isId);
    if (!detail) {
      //console.log('获取详情失败')
      return false
    } else {
      if (detail.images && detail.images.length > 0) {
        try {
          Taro.getImageInfo({
            src: detail.images[0].url + "?x-oss-process=image/resize,w_750",
            success: (res) => {
              const b = 750 / res.width
              this.setState({height: res.height * b})
            }
          })
        } catch (e) {

        }
      }
      await this.initData(detail)
      this.onlyData(detail, platformSet)
      this.setState({bindSellerId})
    }

  }

  onPullDownRefresh() {
    Taro.stopPullDownRefresh();
  }

  shareParams = ''

  async componentDidShow() {
    vcmonitor(this)
    if (this.state.itemId) {
      const detail = await this.getDetailData(this.state.itemId, this.state.bindSellerId);
      await this.initData(detail)
    }
  }

  async componentDidHide() {
    this.setState({firstGet: false})
  }

  async getGoodsUserList(id, buyDate) {
    const data = await http.get(GET_GOODS_USER_LIST_DATA, {goods_id: id, buy_date: buyDate, page: 1})
    if (data) {
      this.setState({userList: data.list, userCount: data.count})
    }
  }

  async initData(detail) {
    if (detail) {
      delete detail.notice
      delete detail.description
      const {buyDate, good_Id} = Taro.getCurrentInstance().router.params;
      let data = {uuid: detail.uuid}
      if (buyDate) {
        data = {uuid: detail.uuid, buyDate, good_Id}
      }
      const info = await newHttp.catchGet(TOURIST_INFO, data);
      const isLogin = await user.checkLogin();
      this.setState({
        good: detail,
        info,
        isLogin,
        showLoading: false,
      })
      this.getInfo(info, detail)
    }
  }

  async getInfo(info, detail) {
    if (info) {
      let destination = [];
      let departure = [];
      if (detail.destinationCityStr) {
        let destinationArr;
        if (detail.destinationCityStr.indexOf(',') > 0) {
          destinationArr = detail.destinationCityStr.split(',')
        } else {
          destinationArr = [detail.destinationCityStr]
        }
        if (destinationArr && destinationArr.length > 0) destination = destinationArr
      }
      if (detail.departureCityStr) {
        let departureArr;
        if (detail.departureCityStr.indexOf(',') > 0) {
          departureArr = detail.departureCityStr.split(',')
        } else {
          departureArr = [detail.departureCityStr]
        }
        if (departureArr && departureArr.length > 0) departure = departureArr
      }
      this.setState({
        info,
        departure,
        destination,
      });
      await this.getGoodsUserList(Taro.getCurrentInstance().router.params.good_Id, Taro.getCurrentInstance().router.params.buyDate)
    }
  }

  async onlyData(detail, platformSet) {
    const poster = await getSharePoster({
      uuid: detail.uuid,
      imgUrl: detail.images[0].url,
      price: detail.price || 0,
      market_price: detail.market_price || 0,
      isDetail: 'tourist-line'
    });
    const siteInfo = await http.get(TOURIST_DETAIL_SITE, {uuid: detail.uuid || ''});
    this.setState({
      itemId: detail.uuid,
      sitePhone: detail.siteServiceTelephone || '',
      siteServiceWx: detail.siteServiceWx || '',
      sharePoster: poster,
      itemName: detail.name,
      siteInfo,
      isHideNavigation: platformSet.isHideNavigation, platformSet
    })
    this.shareParams = await user.getSellerParams()
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
      const shareData = {
        title: platform.info.platformName,
        desc: detail.name,
        link: window.location.origin + '/common/tourist-line/accompany?itemId=' + this.state.itemId + '&good_Id=' + this.state.goodsId + '&buyDate=' + this.state.buyDate + '&' + this.shareParams,
        imgUrl: poster.url
      }
      h5Wx.share(shareData)
    }
  }

  async getDetailData(id = '', bindSellerId = 0, isId = false) {
    let data = {uuid: id, referSellerId: bindSellerId}
    if (isId) {
      data = {id: id, referSellerId: bindSellerId}
    }
    if (id) {
      const detail = await newHttp.catchGet(TOURIST_DETAIL, data);
      if (detail) {
        return detail
      } else {
        setTimeout(() => {
          Taro.switchTab({url: '/pages/index/index'})
        }, 1500)
        return false
      }
    } else {
      return false
    }
  }

  onShareAppMessage() {
    if (process.env.TARO_ENV !== 'tt') {
      http.post(UPDATE_USER_SHARE_DATE, {})
    }
    if (this.state.sharePoster) {
      return {
        path: '/common/tourist-line/accompany?itemId=' + this.state.itemId + '&good_Id=' + this.state.goodsId + '&buyDate=' + this.state.buyDate + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
        title: this.state.itemName,
        imageUrl: this.state.sharePoster.url
      };
    } else {
      return {
        path: '/common/tourist-line/accompany?itemId=' + this.state.itemId + '&good_Id=' + this.state.goodsId + '&buyDate=' + this.state.buyDate + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
        title: this.state.itemName,
      }
    }
  }

  onShareTimeline() {
    const {itemName, sharePoster, itemId, goodsId, buyDate} = this.state
    if (sharePoster) {
      return {
        title: itemName,
        imageUrl: sharePoster.url,
        query: 'itemId=' + itemId + '&good_Id=' + goodsId + '&buyDate=' + buyDate + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      }
    } else {
      return {
        title: itemName,
        query: 'itemId=' + itemId + '&good_Id=' + goodsId + '&buyDate=' + buyDate + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      }
    }

  }

  async navigate(address: string) {
    if (platform.info.isHideNavigation == 1) {
      return
    }
    Taro.showLoading({title: '导航中...'})
    const ret = await location.getCoordinate(address)
    Taro.hideLoading()
    if (ret) {
      lxH5Wx.navigation(ret.lat, ret.lng, address)
    } else {
      Taro.showToast({title: '导航失败,请检查地址信息,请检测地址', icon: 'none'})
    }
  }


  posterRef = React.createRef<any>();

  async getPoste() {
    const isLogin = await user.checkLogin();
    if (!isLogin) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 500);
      return
    }
    if (this.posterRef.current !== undefined) {
      this.posterRef.current.show();
    }
  }

  async onGetPoster() {
    Taro.showLoading({title: '获取海报中...'});
    const poster = await getPoster('tourist', this.state.good.uuid || '')
    Taro.hideLoading();
    if (poster) {
      Taro.navigateTo({url: '/distributor/poster/poster?url=' + poster.url})
    } else {
      Taro.showToast({title: '获取海报失败！', icon: 'none'})
    }
  }

  async navigateOut(latitude, longitude) {
    lxH5Wx.navigation(latitude, longitude)
  }

  makePhone(value) {
    try {
      Taro.makePhoneCall({
        phoneNumber: value
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  message(e) {
    //console.log('message', e);
  }

  async getMSG(index, e) {
    e.stopPropagation()
    const isLogin = await user.checkLogin();
    if (!isLogin) {
      user.jumpLogin()
      return
    }
    const {info, platformSet} = this.state
    const that = this
    const uuid = info.goodsList[index].uuid
    try {
      const tmplIds = platformSet.saleMessageTemplateId || []
      const acceptAry = []
      Taro.requestSubscribeMessage({
        tmplIds,
        success(res) {
          //[tmplIds]是动态的键，即模板id，值包括'accept'、'reject'、'ban'、'filter'。'accept'表示用户同意订阅该条id对应的模板消息，'reject'表示用户拒绝订阅该条id对应的模板消息，'ban'表示已被后台封禁，'filter'表示该模板因为模板标题同名被后台过滤。例如 { errMsg: "requestSubscribeMessage:ok", zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: "accept"} 表示用户同意订阅zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE这条消息
          tmplIds.map((item, i) => {
            if (res[item] == 'accept') {
              acceptAry.push(item)
            }
          })
          if (acceptAry.length > 0) {
            http.post(USER_SALE_SUB, {goodsUUID: uuid, templateIds: acceptAry.join(",")})
            info.goodsList[index]['is_subscribe'] = 1
            that.setState({info})
          }

        },
        fail(error) {
          Taro.showModal({
            title: '提示',
            content: '为了提供更好的服务，建议您开启订阅消息',
            success: (res) => {
              if (res.confirm) {
                Taro.openSetting()
              }
            }
          })
          //console.log(error)
        }
      })
    } catch (e) {
      Taro.showModal({
        title: '提示',
        content: '为了提供更好的服务，建议您开启订阅消息',
        success: (res) => {
          if (res.confirm) {
            Taro.openSetting()
          }
        }
      })
      //console.log(e)
    }

  }

  async removeMSG(index, e) {
    e.stopPropagation()
    const {info} = this.state
    const that = this
    const uuid = info.goodsList[index].uuid
    const ret = await http.postCar(OFF_USER_SALE_SUB, {goodsUUID: uuid})
    if (ret == '取消成功') {
      info.goodsList[index]['is_subscribe'] = 0
      that.setState({info})
    } else {
      Taro.showToast({title: '取消失败', icon: 'none'})
    }
  }

  djs(that, begin, index) {
    if (begin) {
      const {info} = that.state
      let timer;
      const start = new Date(begin).getTime()
      let now = new Date().getTime()
      if (start - now > 1000) {
        timer = setInterval(function () {
          if ((start - now) > 1000) {
            now = now + 1000
          } else {

            clearInterval(timer)
            info.goodsList[index].isGoodsDayInfo = 1
            that.setState({info})
          }
        }, 1000)
      }
      return true
    } else {
      return false
    }
  }

  render() {
    const {buyDate, isLogin, goodsId, userList, userCount, info, good, siteInfo, sitePhone, siteServiceWx, floatLayout, notice, destination, departure, showLoading, isHideNavigation, height, platformSet} = this.state;
    return (
      <View className='tourist-detail-root'>
        <GzhAuth />
        {process.env.TARO_ENV === "weapp" && good.live_room_id && <LiveBar roomId={good.live_room_id}></LiveBar>}
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='275px'
        >
          <View className='swiper-box'>
            <DetailHeader height={height} videoId={good.qq_video_id || ''} mp3={good.mp3 || ''}
              imagesList={good.images.map(item => item.url) || []}
            ></DetailHeader>
          </View>
        </Skeleton>
        <ProductName category={good.category} name={good.name} loading={showLoading} labels={good.serviceLabels || []}
          no={(info.isSeller && good.no) || ''} buyDate={buyDate}
        ></ProductName>
        <Skeleton loading={showLoading} row={3} rowHeight={80}>
          <Block>
            {(destination.length > 0 || departure.length > 0) && <View className='from-to-box'>
              <View className='item destination'>
                <View className='title'>目的地：</View>
                <View className='city'>{destination.length > 0 && destination.map((item, index) => <View key={index}
                  className='city-name'
                >{item}</View>)}</View>
              </View>
              <View className='item departure'>
                <View className='title'>出发地：</View>
                <View className='city'>{departure.length > 0 && departure.map((item, index) => <View key={index}
                  className='city-name'
                >{item}</View>)}</View>
              </View>
            </View>}
            {info.couponLabel && info.couponLabel.length > 0 &&
            <CouponBox list={info.couponLabel} isLogin={isLogin} category={good.category} goodsId={good.id} />}
            {good.latitude && good.longitude ?
              <View className='location' onClick={this.navigateOut.bind(this, good.latitude, good.longitude)}>
                <View className='info'><AtIcon className='icon' value='map-pin' size='16'
                  color='#a7a6a6'
                ></AtIcon>{good.location}{good.address}</View>
                {isHideNavigation != 1 &&
                <View className='btn'>地图 <AtIcon value='chevron-right' size='16' color='#a7a6a6'></AtIcon></View>}
              </View>
              :
              <Block>
                {good.address &&
                <View className='location' onClick={this.navigate.bind(this, good.location + good.address)}>
                  <View className='info'><AtIcon className='icon' value='map-pin' size='16'
                    color='#a7a6a6'
                  ></AtIcon>{good.location}{good.address}</View>
                  {isHideNavigation != 1 &&
                  <View className='btn'>地图 <AtIcon value='chevron-right' size='13' color='#a7a6a6'></AtIcon></View>}
                </View>}
              </Block>
            }
            {good.link_phone && <View onClick={this.makePhone.bind(this, good.link_phone)} className='good-phone'><View
              className='title'
            >联系电话：</View><View className='text'>{good.link_phone}</View></View>}
          </Block>
        </Skeleton>
        <Skeleton loading={showLoading} title
          titleWidth='100%' rowHeight='100px'
        >
          <View className='listPrice'>
            {info.goodsList && info.goodsList.length > 0 && info.goodsList.map((item, i) => <Block>
              {goodsId == item.id && <View className='listPrice-box' key={item.id}>
                <View className='left' onClick={() => {
                  this.setState({notice: item.notice}, () => {
                    const xuzhi = document.getElementById('xuzhi')
                    xuzhi.innerHTML = item.notice
                    this.setState({floatLayout: true})
                  })
                }}
                >
                  <View className='title'>{item.name}</View>
                  {item.bookingEndShow &&<View className='notice'><AtIcon prefixClass='xianshiqianggou'
                    value='xxhz-xianshiqianggou'
                  ></AtIcon>{item.bookingEndShow}</View>}
                  {item.serviceLabels && item.serviceLabels.length > 0 &&
                  <View className='labels'>{item.serviceLabels.map(i => <Text
                    className='label'
                  >{i.name}</Text>)}</View>}
                  <View className='instructions'>{info.isSeller &&
                  <Text decode className='no'>出行日期: {buyDate}&nbsp;&nbsp;|&nbsp;&nbsp;</Text>}购买须知</View>
                </View>
                <View className='right'>
                  {item.isGoodsDayInfo && item.isGoodsDayInfo == 1 ?
                    <Block>
                      <View className='mark-price'><Text className='symbol'>¥</Text><Text
                        className='scribing'
                      >{item.price}</Text><Text
                        className='market'
                      >¥{item.market_price}</Text></View>
                      {process.env.DISTINGUISH_IDENTITY && !!info.isSeller && <View className='brokerage'>{!!item.brokerage &&
                      <Text>佣金:<Text className='number'>￥{item.brokerage}</Text></Text>}{!!item.first_brokerage &&
                      <Text decode>&nbsp;上级佣金:<Text className='number'>￥{item.first_brokerage}</Text></Text>}</View>}
                      {/* <View className="brokerage"><Text>佣金:<Text className="number">￥{item.brokerage}</Text></Text><Text>&nbsp;上级佣金:<Text className="number">￥{item.first_brokerage}</Text></Text></View> */}
                      <View className='place' onClick={() => {
                        if (isLogin) {
                          if (this.props.selectDate.start) {
                            Taro.navigateTo({
                              url: '/main/order/confirm?itemId=' + item.id + '&buyDate=' + buyDate + '&type=tourist'
                            })
                          } else {
                            this.setState({showCalendar: true})
                          }
                        } else {
                          user.jumpLogin()
                          // Taro.navigateTo({
                          //   url: '/main/login/login'
                          // })
                        }
                      }}
                      >立即下单</View>
                    </Block>
                    :
                    <Block>
                      {item.isGoodsDayInfo == 2 &&
                      <Block>
                        <View className='mark-price'><Text className='symbol'>¥</Text><Text
                          className='scribing'
                        >{item.price}</Text><Text
                          className='market'
                        >¥{item.market_price}</Text></View>
                        {item.sell_begin && this.djs(this, item.sell_begin, i) &&
                        <View className='mark-time'>{`${item.sell_begin.substr(5, 2)}月${item.sell_begin.substr(8, 2)}日`}<Text>{item.sell_begin.substr(11, 5)}</Text>准时开售</View>}
                        {process.env.DISTINGUISH_IDENTITY && !!info.isSeller && <View className='brokerage'>{!!item.brokerage &&
                        <Text>佣金:<Text className='number'>￥{item.brokerage}</Text></Text>}{!!item.first_brokerage &&
                        <Text decode>&nbsp;上级佣金:<Text className='number'>￥{item.first_brokerage}</Text></Text>}</View>}
                        {/* <View className="brokerage"><Text>佣金:<Text className="number">￥{item.brokerage}</Text></Text><Text>&nbsp;上级佣金:<Text className="number">￥{item.first_brokerage}</Text></Text></View> */}
                        {platformSet && platformSet.openSaleMessageSubscribe && item.lastMin ?
                          <Block>
                            {item.is_subscribe ?
                              <View className='place-disabled' onClick={this.removeMSG.bind(this, i)}
                                style='background-image: linear-gradient(to right, #e7874f, #ea7448);color:#fff'
                              >取消提醒</View>
                              :
                              <View className='place-disabled' onClick={this.getMSG.bind(this, i)}
                                style='background-image: linear-gradient(to right, #e7874f, #ea7448);color:#fff'
                              >开售提醒</View>
                            }
                          </Block>
                          :
                          <View className='place-disabled'
                            style='background-color:#f3b294;color:#fff'
                          >未开始</View>
                        }

                      </Block>
                      }
                      {item.isGoodsDayInfo == 0 &&
                      <Block>
                        <View className='mark-price'><Text className='symbol'>¥</Text><Text
                          className='scribing'
                        >{item.price}</Text><Text
                          className='market'
                        >¥{item.market_price}</Text></View>
                        {process.env.DISTINGUISH_IDENTITY && !!info.isSeller && <View className='brokerage'>{!!item.brokerage &&
                        <Text>佣金:<Text className='number'>￥{item.brokerage}</Text></Text>}{!!item.first_brokerage &&
                        <Text decode>&nbsp;上级佣金:<Text className='number'>￥{item.first_brokerage}</Text></Text>}</View>}
                        {/* <View className="brokerage"><Text>佣金:<Text className="number">￥{item.brokerage}</Text></Text><Text>&nbsp;上级佣金:<Text className="number">￥{item.first_brokerage}</Text></Text></View> */}
                        <View className='place-disabled'>已售罄</View>
                      </Block>
                      }
                    </Block>
                  }
                </View>
              </View>}</Block>)}

          </View>
        </Skeleton>
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='275px'
        >
          <Block>
            {good.sid && <JoinWx sid={good.sid} phone={sitePhone}></JoinWx>}
            {Object.keys(siteInfo).length != 0 && <EnterStore siteInfo={siteInfo}></EnterStore>}
            {/*同行*/}
            <View className='accompany-title'>
              {userCount}人已报名
              <Navigator url={'/common/tourist-line/accompany_list?buyDate=' + buyDate + '&good_Id=' + goodsId}
                className='accompany-more'
              >查看更多<AtIcon value='chevron-right' size='13'
                color='#a7a6a6'
              ></AtIcon></Navigator>
            </View>
            <View className='accompany-box'>
              {userList && userList.map((item, index) =>
                <View className='acc-item' key={index}>
                  <View className='head-img'>
                    <Image src={item.photo} mode='widthFix'></Image>
                  </View>
                  <View style='width:100%'>
                    <View className='info-box'>
                      <View className='acc-name'>{item.nick_name}</View>
                      <View className='date'>{item.add_date}</View>
                    </View>
                    <View className='info-box'>
                      <View className='sex'><Image
                        src={item.sex == '男' ? RESOURCE_URL + "/resources/weapp/images/men-icon.png" : RESOURCE_URL + "/resources/weapp/images/ms-icon.png"}
                        mode='widthFix'
                      ></Image></View>
                    </View>
                    {item.message && <View className='message'>{item.message}</View>}
                  </View>
                </View>)}
            </View>
          </Block>
        </Skeleton>
        <SupportBar></SupportBar>
        <View style={{height: "70px"}}></View>
        <OtherBar inSale={Boolean(good.is_sale)} showService={Boolean(good.is_show_customer_service)}
          onGetPoster={this.getPoste.bind(this)} onGotoHome={() => {
          Taro.switchTab({url: '/pages/index/index'})
        }} onContact={() => {
          Taro.navigateTo({url: `/distributor/contact/contact${sitePhone ? '?phone=' + sitePhone + (siteServiceWx ? '&weixin=' + siteServiceWx : '') : (siteServiceWx ? '?weixin=' + siteServiceWx : '')}`})
        }}
        />
        <AtFloatLayout isOpened={floatLayout} title='购买须知' scrollY onClose={() => {
          this.setState({floatLayout: false})
        }}
        >
          <View className='float-layout' id='xuzhi'>
            {process.env.TARO_ENV == 'weapp' && <parser html={notice || ''} />}
            {process.env.TARO_ENV == 'tt' && <rich-text preview selectable nodes={getContent(notice)} />}
          </View>
        </AtFloatLayout>
        <MakePoster sloganList={[]} shareSetting={[]} cref={this.posterRef} text={good.slogan || ''} itemId={good.uuid}
          showButton={false} onGetPoster={async () => {
          await this.onGetPoster()
        }}
        />

      </View>
    );
  }
}

export default Accompany as ComponentClass<PageOwnProps, PageState>;
